import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { List, Card, Row, Col, Button, Avatar, Icon } from 'antd';
import NewProgram from '../../components/UpLoadForm/NewProgram';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import {
  progType,
  progSpeed,
  progEntrAnimat,
  progExitAnimat,
  progSound,
  progAudit,
} from '../../utils/city';
import styles from './BasicList.less';

const iconTypes = ['picture', 'video-camera', 'youtube', 'cloud', 'car'];

@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
export default class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      current: 1,
    };
  }
  componentDidMount() {
    const progId = this.props.match.params.progId;
    this.props.dispatch({
      type: 'list/fetchProgramDet',
      payload: {
        progId,
      },
    });
    this.props.dispatch({
      type: 'list/fetchMatList',
      payload: {
        progId,
      },
    });
  }
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };
  onAudit = () => {
    const progId = this.props.match.params.progId;
    this.props.history.push(`/program/programdetail/${progId}`);
  };
  delMat = item => {
    const progId = this.props.match.params.progId;
    // //console.log('progName matId', progName, item.matId);
    this.props.dispatch({
      type: 'list/delProgramMat',
      payload: {
        progId,
        matId: item.matId,
      },
    });
  };

  render() {
    const {
      list: { matList, programInfo },
      loading,
    } = this.props;
    const loadMore = (
      <div
        style={{
          textAlign: 'center',
          marginTop: 12,
          height: 32,
          lineHeight: '32px',
        }}
      >
        <Button type="primary" onClick={this.onAudit}>
          审核
        </Button>
      </div>
    );
    // console.log('matList', matList);
    const Info = ({ title, value, bordered }) => (
      <div className={styles.headerInfo}>
        <span>{title}</span>
        <p>{value}</p>
        {bordered && <em />}
      </div>
    );
    const parentMethods = {
      handleModalVisible: this.handleModalVisible,
    };

    const paginationProps = {
      onChange: page => {
        // console.log(page);
        this.setState({ current: page });
      },
      pageSize: 10,
      current: this.state.current,
      total: matList.length,
    };

    const ListContent = props => (
      <div className={styles.listContent}>
        <div className={styles.listContentItem}>
          <span>素材ID</span>
          <p>{props.data.matId}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>素材名</span>
          <p>{props.data.fileName}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>审核状态</span>
          <p>{progAudit[props.data.pmAuditStatus]}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>播放类型</span>
          <p>{progType[props.data.playType]}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>播放时长</span>
          <p>{props.data.playTimeLen}</p>
        </div>

        <div className={styles.listContentItem}>
          <span>入场动画</span>
          <p>{progEntrAnimat[props.data.entrAnimat]}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>结束动画</span>
          <p>{progExitAnimat[props.data.exitAnimat]}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>声音</span>
          <p>{progSound[props.data.sound]}</p>
        </div>
        <div className={styles.listContentItem}>
          <span>帧率</span>
          <p>{props.data.frameRate}</p>
        </div>
      </div>
    );

    return (
      <PageHeaderLayout>
        <div className={styles.standardList}>
          <Card bordered={false}>
            <Row>
              <Col sm={8} xs={24}>
                <Info title="节目名称" value={programInfo.progName} bordered />
              </Col>
              <Col sm={8} xs={24}>
                <Info title="尺寸" value={programInfo.progSize} bordered />
              </Col>
              <Col sm={8} xs={24}>
                <Info title="作者" value={programInfo.progAuthor} />
              </Col>
            </Row>
          </Card>

          <Card
            className={styles.listCard}
            bordered={false}
            title="素材列表"
            style={{ marginTop: 24 }}
            bodyStyle={{ padding: '0 32px 40px 32px' }}
            // extra={extraButton}
          >
            <Button
              type="dashed"
              style={{ width: '100%', marginBottom: 8 }}
              icon="plus"
              onClick={() => {
                const progId = this.props.match.params.progId;
                this.props.history.push(`/basic-form/${progId}`);
              }}
            >
              添加
            </Button>
            <NewProgram {...parentMethods} modalVisible={this.state.modalVisible} />
            <List
              size="large"
              rowKey="id"
              loading={loading}
              footer={loadMore}
              pagination={paginationProps}
              dataSource={matList}
              renderItem={item => (
                <List.Item actions={[<a onClick={() => this.delMat(item)}>删除</a>]}>
                  <List.Item.Meta
                    avatar={
                      <Avatar
                        shape="square"
                        size="large"
                        src={item.matThumUrl}
                        style={{ backgroundColor: '#87d068' }}
                        icon={iconTypes[item.matType] ? iconTypes[item.matType] : 'picture'}
                      />
                    }
                    title={<a href={item.href}>{item.fileName}</a>}
                  />
                  <ListContent data={item} />
                </List.Item>
              )}
            />
          </Card>
        </div>
      </PageHeaderLayout>
    );
  }
}
